$(function($) {
    // 选择商品
    var id = location.search.split('=')[1]; // 从地址栏获得ID
    // console.log(id);
    $.ajax({
        type: "get",
        url: "../../lib/getitem.php",
        data: {
            "id": id
        },
        dataType: "json",
        success: function(res) {
            // console.log(res);
            // console.log(id);
            var pic = JSON.parse(res.pic);
            // console.log(pic);
            var template = `<div class="goods_top"></div>
            <div class="goods_box container">
                <div class="row">
                    <div class="col-md-8">
                        <div class="container-fluid left_img">
                            <div class="row">
                                <div class="col-md-6 left_img_left">
                                    <img src="${pic[4].src}" style="display: inline-block">
                                    <img src="${pic[5].src}">
                                    <img src="${pic[6].src}">
                                </div>
                                <div class="col-md-6 left_img_right">
                                    <img src="${pic[7].src}" style="display: inline-block">
                                    <img src="${pic[8].src}">
                                    <img src="${pic[9].src}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 goods_box_right">
                        <h2>
                        ${res.name}
                            <span>￥${res.price}</span>
                        </h2>
                        <h1>${res.title}</h1>
                        <div class="colorway-images-wrapper">
                            <ul>
                                <li><i></i><img src="${pic[1].src}" title="绿色"></li>
                                <li><img src="${pic[2].src}" alt="" title="黄色"></li>
                                <li><img src="${pic[3].src}" alt="" title="黑色"></li>
                            </ul>
                            <!-- <img src="../img/color4.webp" alt="">
                            <img src="../img/color5.webp" alt=""> -->
                        </div>
                        <div class="choose_size">
                            <h3>选择尺码<span>尺码表</span></h3>
                            <div class="sizes">
                                <label for="">36</label>
                                <label for="">37</label>
                                <label for="">38</label>
                                <label for="">39</label>
                                <label for="">40</label>
                                <label for="">41</label>
                                <label for="">42</label>
                                <label for="">43</label>
                                <label for="">44</label>
                            </div>
                            <button class="addcar">加入购物车</button>
                            <p class="descript">
                                Nike Air Max 720 搭载厚度升级的大型 Air 气垫，为足下注入更多空气，带来非凡舒适脚感。Air Max 的大体积设计让你耳目一新？当然是越大越好。
                            </p>
                            <p>
                                价格说明（此说明仅当出现价格比较时有效)
                                <br>
                                <br> 划线价格：划线的价格可能是商品的专柜价吊牌价或正品零售价指导价或该商品的曾经展示过的销售价等，仅供您参考。未划线价格：未划线的价格是商品在本平台上的销售标价，具体的成交价格可能因顾客使用优惠券、礼品卡等情况发生变化，最终以订单结算页价格为准 。
                            </p>
                        </div>
    
                    </div>
                </div>
            </div>
            <div class="discript_img">
                <img src="../img/imagecgx.jpg" alt="">
                <img src="../img/image2.jpg" alt="">
            </div>`;
            // 动态加载
            $('#goods').prepend(template);
            // 图片颜色src
            // color();
            let colorbox = $('.colorway-images-wrapper');
            let imgs = colorbox.find('li');
            imgs.on('click', this, function() {
                let _i = imgs.find('i');
                let left_img_left = $('.left_img_left'); //左边大图
                let left_img_right = $('.left_img_right'); //右边大图
                let that = $(this); //管他有没有用保存一下this指向
                let index = that.index(); //获得点击li的索引
                _i.remove(); //清空i标签
                that.prepend(_i); //为点击的li标签添加i标签
                let colorsrc = that.find('img').attr('src'); //颜色信息 
                // console.log(colorsrc);
                cookie.set('colorsrc', colorsrc, 1);
                left_img_left.find('img').eq(index).attr('style', 'display:inline-block');
                left_img_left.find('img').not(`:eq(${index})`).attr('style', 'display:none');
                left_img_right.find('img').eq(index).attr('style', 'display:inline-block');
                left_img_right.find('img').not(`:eq(${index})`).attr('style', 'display:none');
                // location = location;
            });
            // 获取size
            $('.sizes').find('label').on('click', this, function() {
                let itsize = $(this).text();
                // console.log(itsize);
                $('label').attr('style', ''); //清空样式
                $(this).attr('style', ' border: solid 1px black');
                cookie.set('size', itsize, 1); //存入cookie
            });

            // var colorsrc = cookie.get('colorsrc'); //获取到选择的颜色
            // var itsize = cookie.get('size'); //获取到选择的尺码
            var itsize;
            var colorsrc;
            setInterval(() => {
                itsize = cookie.get('size'); //获取到选择的尺码
                colorsrc = cookie.get('colorsrc'); //获取到选择的颜色
            }, 1000);
            // 加入购物车
            var num = 0;
            $('.addcar').on('click', function() {
                // location = location;
                num = num + 1;
                additem(res.id, res.price, num, colorsrc, itsize);
                console.log(itsize);
            });
        }
    });

    function additem(id, price, num, colorsrc, size) {
        var shop = cookie.get('shop'); //取cookie
        var product = {
            "id": id,
            "price": price,
            "num": num,
            "colorsrc": colorsrc,
            "size": size
        };

        if (shop) {
            shop = JSON.parse(shop);
            // console.log(shop);
            if (shop.some(elm => elm.id == id)) {
                shop.forEach((elm, i) => {
                    elm.id == id ? elm.num = num : null;
                });
            } else {
                shop.push(product);
            }
            cookie.set('shop', JSON.stringify(shop), 1);
        } else {
            shop = [];
            shop.push(product);
            cookie.set('shop', JSON.stringify(shop), 1);
        }
        // console.log(JSON.stringify(shop));
        var str = JSON.stringify(product);
        console.log(str)
            // cookie.set('shop', str, 1);
    }

}, (jQuery))